import { LGraphNode, Vector2 } from "litegraph.js";
import { CpcBaseWidge } from "../nodes/base/CpcBaseWidge";

export class LeftRightAddBtn extends CpcBaseWidge {
    public name = "LeftRightAddBtn";

    public value = "";

    public margin = 15;

    private halfW = 0;

    public disabled = false;

    public config = {
        left: {
            color: "#fff",
            clickedColor: "#aaa",
            clicked: false,
            value: "+",
            callback: undefined,
        },
        right: {
            color: "#fff",
            clickedColor: "#aaa",
            clicked: false,
            value: "+",
            callback: undefined,
        },
    };

    constructor(config: any) {
        super();
        this.config.left = Object.assign(this.config.left, config.left);
        this.config.right = Object.assign(this.config.right, config.right);
    }

    private drawLeft(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, posY: number, height: number) {
        const { clicked, clickedColor, color, value } = this.config.left;
        if (clicked) {
            ctx.fillStyle = clickedColor;
            this.config.left.clicked = false;
        }
        const margin = this.margin;
        const halfW = this.halfW;
        ctx.fillRect(margin, posY, halfW - margin * 2, height);
        if (!this.disabled) ctx.strokeRect(margin, posY, halfW - margin * 2, height);
        ctx.textAlign = "center";
        ctx.fillStyle = color;
        ctx.fillText(value, halfW * 0.5, posY + height * 0.7);
    }

    private drawRight(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, posY: number, height: number) {
        const { clicked, clickedColor, color, value } = this.config.right;
        ctx.beginPath();
        ctx.strokeStyle = "#666";
        ctx.fillStyle = "#222";
        ctx.textAlign = "left";
        if (clicked) {
            ctx.fillStyle = clickedColor;
            this.config.right.clicked = false;
        }
        const margin = this.margin;
        const halfW = this.halfW;
        ctx.fillRect(margin + halfW, posY, halfW - margin * 2, height);
        if (!this.disabled) ctx.strokeRect(margin + halfW, posY, halfW - margin * 2, height);
        ctx.textAlign = "center";
        ctx.fillStyle = color;
        ctx.fillText(value, (halfW + width) * 0.5, posY + height * 0.7);
    }

    public draw(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, posY: number, height: number): void {
        this.halfW = width / 2;
        this.drawLeft(ctx, node, width, posY, height);
        this.drawRight(ctx, node, width, posY, height);
    }

    public mouse(event: MouseEvent, pos: Vector2, node: LGraphNode): boolean {
        if (event.type === "mousemove" || event.type === "mousedown") {
            return false;
        }
        const left = pos[0];
        const margin = this.margin;
        const halfW = this.halfW;
        let callback: any;
        if (left > margin && left < halfW - margin) {
            this.config.left.clicked = true;
            callback = this.config.left.callback;
        } else if (left > halfW - margin && left < halfW * 2 - margin) {
            this.config.right.clicked = true;
            callback = this.config.right.callback;
        }
        if (callback) {
            setTimeout(() => {
                callback(this.value, this, node, pos, event);
            }, 20);
        }
        return true;
    }
}
